<script setup>

import { ref,onMounted } from 'vue';
import {quaryPageApi,addUserApi,getUserByIdApi,updateByIdApi,deleteByIdApi} from '@/api/user'
//引入子组件
import DeleteVue from './delete.vue'; 
// 导入图片上传失败的警告提示信息需要的组件
import { ElMessage } from 'element-plus';


const searchEmp = ref({
  name: '',
  gender: ''
})

//列表的数据定义
const empList=ref([])


//定义分页数据
const currentPage=ref(1)
const pageSize = ref(3)
//总条数
const total = ref(0)
const size= 'default'
const disabled = false
const background = true 

//分页每页大小发生改变（每页展示val条数据）
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  //页码从第一页开始
  currentPage.value=1
  //每页多少条
  pageSize.value=val
  //执行搜索
  searchHandler()
}
//当前页发生改变（当前是第val页）
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  //当前页发生变化
  currentPage.value=val
  //执行搜索
  searchHandler()
}

//执行分页搜索函数
const searchHandler=async()=>{
  //调用接口
  let result = await quaryPageApi(searchEmp.value.name,searchEmp.value.gender,currentPage.value,pageSize.value)
  //放数据
  empList.value = result.data.userList
  //分页数据完善
  total.value = result.data.total
}

//清空操作
const clearHandler = ()=> {
  searchEmp.value.gender=''
  searchEmp.value.name=''
  searchHandler()
}



//新增/修改表单 
//存放发送给后端的数据
const formData = ref({
  name:'',
  gender:'',
  identifier:'',
  job:'',
  phone:'',
  status:'',
  createTime:'',
  updateTime:''
})
//定义变量控制新增/修改对话框是否显示
const dialogShow= ref(false)

//定义函数控制新增/修改对话框是否显示
const showDialog = ()=>{
  dialogShow.value=true;
  tips.value = "新增用户"
}

//定义对话框的标题
const tips = ref('新增用户')

//新增方法(点击保存的时候)
const addUser=async()=>{
  let result = null
  //如果表单的id存在
  if(formData.value.id){
    //调用修改方法
    result= await updateByIdApi(formData.value)
      //下面这个如果不放到定义result的方法里面那么result就是空值自然不会判断
      if(result){
        ElMessage.success("修改成功")
        // 将弹框关闭
        dialogShow.value = false
        searchHandler()
      }else{
        ElMessage.error("修改失败")
      }
  }else{
    result =await addUserApi(formData.value);
    //下面这个如果不放到定义result的方法里面那么result就是空值自然不会判断
    if(result){
      ElMessage.success("新增成功")
      // 将弹框关闭
      dialogShow.value = false
      searchHandler()
    }else{
      ElMessage.error("新增失败")
    }
  }
  
}


//修改操作(将数据回显到弹框并将名字改成修改员工)
  //1.定义一个点击事件,进行回显操作
  const queryServerById= async(id)=>{
    //调用emp.js中根据id来查询数据的方法
    let result= await getUserByIdApi(id)
    
    //将数据里面的data给表单
    formData.value=result.data
    // //这里后端的begin和start在前端是在集合里面
    // formData.value.exprList.forEach((items,index)=>{
    //   //把后端的begin和end的两个数据添加到到一个名字叫data数组当中，因为当时绑定这两个时间的v-modle="exp.data"
    //   //数组的forEach 可以获取每一个对象，并将每一个对象对应的值赋给两个时间对应的数组，那么就通过双向绑定取到对应的值
    //   //这个data名字也有讲究 如果表单绑定的名字不是data那么这边也不能是data
    //   items.data=[]
    //   items.data.push(items.begin)
    //   items.data.push(items.end)
    // })

    //将对话框标题改成修改员工
    tips.value="修改用户"
    //显示对话框
    dialogShow.value=true
    //-------------------------------------------------------------------------------------------------------------
    //注意：这里的性别和职位的数据有点问题，因为他的返回值是数字类型 并不是字符串类型 所以判断不出来对应值
    //所以可以在前端（比较麻烦 每个地方都需要进行处理）或者后端处理 （只需要处理一次，一劳永逸）  
    //部门之所以显示数字1而没有问题是因为他是动态展示（访问后端）的结果
    //------------------------------------------------------------------------------------------------------------
  }
  //2.进行保存,不过此时不在这里继续写，而是在新增那里写，因为对话框都是同一个



//------------------------------------------------------------------------
//界面的删除员工操作（批量和单独删除）
  //存放得到的数组
  const deleteIds = ref([]);

  //点击勾选框调用的方法
  //定义勾选框的关联表格内容的操作方法handleSelectionChange,处理所有选中的行信息
  //当用户勾选表格行时，这个方法会被触发。参数 selection 是一个数组，包含当前所有被选中的行数据。
  //得到的数据有很多 map形式即集合  我们只需要id   方法（）内的名字自己随便定义
  const handleSelectionChange =(selection)=>{
    //定义变量接收集合中的id值
    let idCollections= selection.map(function(item){
      //返回值只有一行，可以写成类似java中的lambda表达式
      //提取所有选中的id
      return item.id
      
    })
    deleteIds.value=idCollections
    // console.log(deleteIds)
  }

  
  //点击批量删除调用的方法
  const deleteByIds=async()=>{
    //调用js中定义的删除方法
    let result= await deleteByIdApi(deleteIds.value)
    //searchHandler  刷新界面
    searchHandler()
  }

  //单独删除操作的方法
  const deleteById=(id)=>{
    //将id给批量删除需要用到存放id的数组当中
    deleteIds.value=[id]
    //再调用批量删除的方法，这样十分方便
    deleteByIds()
    console.log(id)
  }

//删除
//1.定位子组件
const chilRef = ref('chilRef')
//2.通过子组件指定要调用的子组件方法或者变量
//3.赋值
const handleEdit = (row)=>{
  //操作子组件实现删除弹框显示
  //chilRef.value.dialogShow=true   //这是操作值
  chilRef.value.show(true)
  chilRef.value.deleteByIdZi
}


onMounted(()=>{
  searchHandler()
})

</script>

<template>
    <el-form :inline="true" :model="searchEmp" label-width="auto" style="max-width: 800px">
        <el-form-item label="姓名" style="width: 200px;">
        <el-input v-model="searchEmp.name" />
        </el-form-item>
        <el-form-item label="性别" style="width: 200px;">
        <el-select v-model="searchEmp.gender" placeholder="性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
        </el-select>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="searchHandler">查询</el-button>
        </el-form-item>
        <el-form-item>
        <el-button type="danger" @click="clearHandler">清空</el-button>
        </el-form-item>
    </el-form>
    
    <el-form :inline="true">
        
        <el-button type="primary" @click="showDialog">新增</el-button>
    </el-form>

   <el-table :data="empList" @selection-change="handleSelectionChange"  style="width: 100%">
        <!-- 上面一行的@selection-change="handleSelectionChange" 是点击下面显示的勾选框时可以绑定对应的表格内的行内容 -->
        <!-- 下面这一行el-table-column是显示表格勾选框 -->
        <el-table-column type="selection" width="55"  />
        <el-table-column prop="identifier" label="员工编号" width="150" align="center" />
        <el-table-column prop="name" label="员工名称" width="150" align="center" />
        <el-table-column prop="job" label="角色" width="180" align="center" />
        <el-table-column prop="gender" label="性别" width="180"  align="center">
          <template #default="scope">
              <el-tag v-if="scope.row.gender==1">男</el-tag>
              <el-tag v-else>女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="180" align="center" />

        <el-table-column prop="createTime" label="创建日期" align="center" />
        <el-table-column fixed="right" label="操作" min-width="120" align="center" >
            <template #default="scope">
                <!-- queryEmpById(scope.row.id) 取到这一行数据的id并将id作为参数给这个方法 -->
                <el-button link type="primary" size="small" @click="queryServerById(scope.row.id)">
                修改
                </el-button>
                <el-button link type="primary" size="small" @click="deleteById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


   <!-- 分页实现 -->
  <div class="page">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9, 12]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>


   <!-- 添加或修改护理项目对话框 -->
    <el-dialog :title="tips" v-model="dialogShow" width="500px" >
      <el-form ref="nursingProjectRef" :model="formData"  label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入员工名称" />
        </el-form-item>
        <el-form-item label="编号" prop="identifier">
          <el-input v-model="formData.identifier" placeholder="请输入员工编号" />
        </el-form-item>
        <el-form-item label="角色" prop="job">
           <el-select v-model="formData.job" placeholder="请选择员工角色" style="width: 100%">
              <el-option label="开发工程师" value="开发工程师" />
              <el-option label="测试工程师" value="测试工程师" />
              <el-option label="产品经理" value="产品经理" />
              <el-option label="UI设计师" value="UI设计师" />
              <!-- 可根据实际需求添加更多角色选项 -->
           </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="formData.gender" placeholder="请输入员工性别" style="width: 100%">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />     
           </el-select>
        </el-form-item>
        
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入员工联系方式" />
        </el-form-item>

        <!-- <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="np in nursing_project_status" :key="np.value" :label="np.value">{{ np.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="状态">
          <el-select v-model="formData.status" placeholder="请输入员工联系方式" style="width: 100%">
              <el-option label="禁用" value="0" />
              <el-option label="启用" value="1" />     
           </el-select>
        </el-form-item>

        <!-- <el-form-item label="图片" prop="image">
          <image-upload v-model="formData.image"/>
        </el-form-item> -->
        <!-- <el-form-item label="护理要求" prop="nursingRequirement">
          <el-input v-model="formData.nursingRequirement" placeholder="请输入护理要求" />
        </el-form-item> -->
        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addUser">保存</el-button>
          <el-button @click="dialogShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

<!-- 删除子组件引入 -->
 <DeleteVue ref="chilRef"></DeleteVue>

</template>

<style scoped>

</style>